<!DOCTYPE html>
<html>
<head>
    

    

    
<!-- Baidu Tongji -->
<script>var _hmt = _hmt || []</script>
<script async src="//hm.baidu.com/hm.js?a7c05ce530152d9866930ef4850ee566"></script>
<!-- End Baidu Tongji -->




    <meta charset="utf-8">
    
    
    
    <title>jQuery入门(一) | 神奇的鸭鸭の码农库 | 新知识要不断的总结记录成笔记，要多写，多画，能够清晰透彻的将知识讲给别人听，才是达到理解的层次。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#765959">
    
    
    <meta name="keywords" content="前端">
    <meta name="description" content="jQuery概述JS类库JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 当前认识的JavaScript库 jQuery，最流行 KISSY，淘宝开源UI Bootstrap，来自Twitter，时目前很受欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT的，能使Web开发更加快捷，是基于jQuery的一个UI工具">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery入门(一)">
<meta property="og:url" content="http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/index.html">
<meta property="og:site_name" content="神奇的鸭鸭の码农库">
<meta property="og:description" content="jQuery概述JS类库JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 当前认识的JavaScript库 jQuery，最流行 KISSY，淘宝开源UI Bootstrap，来自Twitter，时目前很受欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT的，能使Web开发更加快捷，是基于jQuery的一个UI工具">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%E7%89%88%E6%9C%AC%E6%88%AA%E5%9B%BE.png">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQueryLogo.png">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQueryAPI%E6%88%AA%E5%9B%BE.png">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%28%E4%B8%80%29%E8%B5%84%E6%96%99.png">
<meta property="og:updated_time" content="2017-11-13T14:17:20.462Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery入门(一)">
<meta name="twitter:description" content="jQuery概述JS类库JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 当前认识的JavaScript库 jQuery，最流行 KISSY，淘宝开源UI Bootstrap，来自Twitter，时目前很受欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT的，能使Web开发更加快捷，是基于jQuery的一个UI工具">
<meta name="twitter:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%E7%89%88%E6%9C%AC%E6%88%AA%E5%9B%BE.png">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">神奇的鸭鸭</h5>
          <a href="mailto:702038338@qq.com" title="702038338@qq.com" class="mail">702038338@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://git.oschina.net/magic_duck" target="_blank" >
                <i class="icon icon-lg icon-gg-circle"></i>
                码云
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://www.zhihu.com/people/shen-qi-de-ya-ya" target="_blank" >
                <i class="icon icon-lg icon-twitter"></i>
                知乎
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/404.html"  >
                <i class="icon icon-lg icon-link"></i>
                404页面测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">jQuery入门(一)</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">jQuery入门(一)</h1>
        <h5 class="subtitle">
            
                <time datetime="2017-07-30T14:08:00.000Z" itemprop="datePublished" class="page-time">
  2017-07-30
</time>


            
        </h5>
    </div>

    

</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#jQuery概述"><span class="post-toc-number">1.</span> <span class="post-toc-text">jQuery概述</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#JS类库"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">JS类库</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#当前认识的JavaScript库"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">当前认识的JavaScript库</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#JQuery介绍"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">JQuery介绍</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#版本介绍"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">版本介绍</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#优点"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">优点</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#学习准备"><span class="post-toc-number">2.</span> <span class="post-toc-text">学习准备</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#基本语法"><span class="post-toc-number">3.</span> <span class="post-toc-text">基本语法</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#jQuery语法"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">jQuery语法</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#jQuery对象和dom对象的转换"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">jQuery对象和dom对象的转换</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#选择器"><span class="post-toc-number">4.</span> <span class="post-toc-text">选择器</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#基本"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">基本</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#层级"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">层级</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#基本过滤"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">基本过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#内容过滤"><span class="post-toc-number">4.4.</span> <span class="post-toc-text">内容过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#可见性过滤"><span class="post-toc-number">4.5.</span> <span class="post-toc-text">可见性过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#属性过滤"><span class="post-toc-number">4.6.</span> <span class="post-toc-text">属性过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#子元素过滤"><span class="post-toc-number">4.7.</span> <span class="post-toc-text">子元素过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#表单过滤"><span class="post-toc-number">4.8.</span> <span class="post-toc-text">表单过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#表单对象属性过滤"><span class="post-toc-number">4.9.</span> <span class="post-toc-text">表单对象属性过滤</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#属性和CSS"><span class="post-toc-number">5.</span> <span class="post-toc-text">属性和CSS</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#属性"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">属性</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#CSS类"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">CSS类</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#HTML-代码-文本-值"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">HTML 代码/文本/值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#CSS"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">CSS</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#位置"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">位置</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#尺寸"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">尺寸</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文档处理"><span class="post-toc-number">6.</span> <span class="post-toc-text">文档处理</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#内部插入"><span class="post-toc-number">6.1.</span> <span class="post-toc-text">内部插入</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#外部插入"><span class="post-toc-number">6.2.</span> <span class="post-toc-text">外部插入</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#包裹"><span class="post-toc-number">6.3.</span> <span class="post-toc-text">包裹</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#替换"><span class="post-toc-number">6.4.</span> <span class="post-toc-text">替换</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#删除"><span class="post-toc-number">6.5.</span> <span class="post-toc-text">删除</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#复制"><span class="post-toc-number">6.6.</span> <span class="post-toc-text">复制</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#选择器案例"><span class="post-toc-number">7.</span> <span class="post-toc-text">选择器案例</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文档处理案例"><span class="post-toc-number">8.</span> <span class="post-toc-text">文档处理案例</span></a></li></ol>
        </nav>
    </aside>
    
<article id="post-jQuery_primary_01"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">jQuery入门(一)</h1>
        <div class="post-meta">
            <time class="post-time" title="2017年07月30日 22:08" datetime="2017-07-30T14:08:00.000Z"  itemprop="datePublished">2017-07-30</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h2 id="jQuery概述"><a href="#jQuery概述" class="headerlink" title="jQuery概述"></a>jQuery概述</h2><h3 id="JS类库"><a href="#JS类库" class="headerlink" title="JS类库"></a>JS类库</h3><p>JavaScript 库封装了很多<strong>预定义的对象</strong>和<strong>实用函数</strong>。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。</p>
<h3 id="当前认识的JavaScript库"><a href="#当前认识的JavaScript库" class="headerlink" title="当前认识的JavaScript库"></a>当前认识的JavaScript库</h3><ul>
<li><a href="https://jquery.com/" target="_blank" rel="external">jQuery</a>，最流行</li>
<li><a href="http://docs.kissyui.com/" target="_blank" rel="external">KISSY</a>，淘宝开源UI</li>
<li><a href="http://www.bootcss.com/" target="_blank" rel="external">Bootstrap</a>，来自Twitter，时目前很受欢迎的前端框架，是基于HTML、CSS、JAVASCRIPT的，能使Web开发更加快捷，是基于jQuery的一个UI工具</li>
</ul>
<h3 id="JQuery介绍"><a href="#JQuery介绍" class="headerlink" title="JQuery介绍"></a>JQuery介绍</h3><p>JQuery是继prototype之后又一个优秀的Javascript库。它是<strong>轻量级</strong>的js库 ，它兼容CSS3，还兼容<strong>各种浏览器</strong>（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支IE6/7/8浏览器。jQuery 使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的<strong>文档说明很全</strong>，而且各种应用也说得很详细，同时还有许多<strong>成熟的插件</strong>可供选择。jQuery能够使用户的 html 页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。</p>
<ul>
<li>轻量级：依赖程序少，占用资源少</li>
<li>特点：js代码和html代码分离</li>
<li>在世界前10000个访问最多的网站中，有超过55%在使用jQuery</li>
<li>由美国人John Resig在2006年1月发布</li>
<li>jQuery是免费、开源的</li>
<li>jQuery分类：WEB版本、UI版本、mobile版本、qunit版本(用于测试)</li>
</ul>
<h3 id="版本介绍"><a href="#版本介绍" class="headerlink" title="版本介绍"></a>版本介绍</h3><p>目前已经更新到3.2.1版本，建议学习使用1.11版本，2.0+不再兼容IE6~8，因此目前1.1还不能抛弃，需要看项目需求。</p>
<ul>
<li>jquery-js 源码js</li>
<li>jquery-min 压缩版</li>
</ul>
<p><img src="http://om6odecqr.bkt.clouddn.com/jQuery%E7%89%88%E6%9C%AC%E6%88%AA%E5%9B%BE.png" alt="jQuery版本截图"></p>
<h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3><p><img src="http://om6odecqr.bkt.clouddn.com/jQueryLogo.png" alt="jQueryLogo"></p>
<ul>
<li>核心理念是write less,do more(写得更少,做得更多)</li>
<li>轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。</li>
<li>兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）</li>
<li>jQuery的语法设计可以使开发者更加便捷</li>
<li>例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能</li>
<li>jQuery能够使用户的html页面保持代码和html内容分离</li>
<li>不用再在html里面插入一堆js来调用命令了，只需要定义id即可</li>
<li>jQuery提供API让开发者编写插件，有许多成熟的插件可供选择</li>
<li>文档说明很全</li>
</ul>
<h2 id="学习准备"><a href="#学习准备" class="headerlink" title="学习准备"></a>学习准备</h2><p>画圈部分为本次笔记的内容：<a href="http://jquery.cuishifeng.cn/" target="_blank" rel="external">jQuery API</a><br><img src="http://om6odecqr.bkt.clouddn.com/jQueryAPI%E6%88%AA%E5%9B%BE.png" alt="jQueryAPI截图"></p>
<p><a href="http://download.csdn.net/detail/sq_yaya/9915241" target="_blank" rel="external">案例源码下载</a><br><img src="http://om6odecqr.bkt.clouddn.com/jQuery%28%E4%B8%80%29%E8%B5%84%E6%96%99.png" alt="jQuery(一)资料"></p>
<h2 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h2><h3 id="jQuery语法"><a href="#jQuery语法" class="headerlink" title="jQuery语法"></a>jQuery语法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* jQuery 获得数据</span></div><div class="line"><span class="comment"> * 语法：$("选择器")   == jQuery("选择器")</span></div><div class="line"><span class="comment"> */</span></div><div class="line"><span class="keyword">var</span> username = $(<span class="string">"#username"</span>);</div><div class="line"><span class="comment">// val() 函数 用于获得 value 属性的值</span></div><div class="line">alert(username.val());</div></pre></td></tr></table></figure>
<h3 id="jQuery对象和dom对象的转换"><a href="#jQuery对象和dom对象的转换" class="headerlink" title="jQuery对象和dom对象的转换"></a>jQuery对象和dom对象的转换</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 1 使用javascript获得value</span></div><div class="line"><span class="keyword">var</span> username = <span class="built_in">document</span>.getElementById(<span class="string">"username"</span>);</div><div class="line"><span class="comment">// alert(username.value);</span></div><div class="line"></div><div class="line"><span class="comment">// 2 将dom对象 转换 jQuery对象</span></div><div class="line"><span class="comment">// * 语法：$(dom对象)</span></div><div class="line"><span class="comment">// * 建议：jQuery对象变量名，建议开头为$开头</span></div><div class="line"><span class="keyword">var</span> $username = $(username);</div><div class="line"><span class="comment">// alert($username.val());</span></div><div class="line"></div><div class="line"><span class="comment">// 3 将jQuery对象 转换 dom对象</span></div><div class="line"><span class="comment">// 3.1 jQuery对象内部使用[数组]存放所有的数据，可以使用数组的下标获取（索引）</span></div><div class="line"><span class="keyword">var</span> username2 = $username[<span class="number">0</span>];</div><div class="line"><span class="comment">// alert(username2.value);</span></div><div class="line"><span class="comment">// 3.2 jQuery提供函数 get() 转换成 dom对象</span></div><div class="line"><span class="keyword">var</span> username3 = $username.get(<span class="number">0</span>);</div><div class="line">alert(username3.value);</div></pre></td></tr></table></figure>
<h2 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h2><h3 id="基本"><a href="#基本" class="headerlink" title="基本"></a>基本</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">#id</td>
<td style="text-align:left">id选择器，通过id值获得元素</td>
</tr>
<tr>
<td style="text-align:left">element</td>
<td style="text-align:left">标签选择器，通过标签名获得元素</td>
</tr>
<tr>
<td style="text-align:left">.class</td>
<td style="text-align:left">类选择器，通过class值获得元素</td>
</tr>
<tr>
<td style="text-align:left">*</td>
<td style="text-align:left">所有</td>
</tr>
<tr>
<td style="text-align:left">selector1,selectorN</td>
<td style="text-align:left">多选择器，将多个选择器的结果添加到一个数组中</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// jQuery页面加载，同windown.onload = function()&#123; ... &#125;</span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 id为 one 的元素." id="btn1" /&gt;</span></div><div class="line">    $(<span class="string">"#btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#one"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FFF"</span>);</div><div class="line">    &#125;);    </div><div class="line"><span class="comment">// &lt;input type="button" value="选择 class 为 mini 的所有元素." id="btn2" /&gt;</span></div><div class="line">    $(<span class="string">"#btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">".mini"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FFF"</span>);</div><div class="line">    &#125;);    </div><div class="line"><span class="comment">// &lt;input type="button" value="选择 元素名是 div 的所有元素." id="btn3" /&gt;</span></div><div class="line">    $(<span class="string">"#btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FFF"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 所有的元素." id="btn4" /&gt;</span></div><div class="line">    $(<span class="string">"#btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"*"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FFF"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" /&gt;</span></div><div class="line">    $(<span class="string">"#btn5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"span,#two"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FFF"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="层级"><a href="#层级" class="headerlink" title="层级"></a>层级</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">ancestor descendant</td>
<td style="text-align:left">获取A元素内所有的B后代元素（爷孙）</td>
</tr>
<tr>
<td style="text-align:left">parent &gt; child</td>
<td style="text-align:left">获取A元素内所有的B子元素（父子）</td>
</tr>
<tr>
<td style="text-align:left">prev + next</td>
<td style="text-align:left">获取A元素后面的第一个兄弟B（兄弟）</td>
</tr>
<tr>
<td style="text-align:left">prev ~ siblings</td>
<td style="text-align:left">获取A元素后面所有的兄弟B（兄弟）</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 body内的所有div元素." id="btn1"/&gt;</span></div><div class="line">    $(<span class="string">"#btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"body div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>); </div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="在body内,选择子元素是div的。" id="btn2"/&gt;</span></div><div class="line">    $(<span class="string">"#btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"body&gt;div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 id为one 的下一个div元素." id="btn3"/&gt;</span></div><div class="line">    $(<span class="string">"#btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#one+div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/&gt;</span></div><div class="line">    $(<span class="string">"#btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#two~div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/&gt;</span></div><div class="line">    $(<span class="string">"#btn5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。</span></div><div class="line">        $(<span class="string">"#two"</span>).siblings(<span class="string">"div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="基本过滤"><a href="#基本过滤" class="headerlink" title="基本过滤"></a>基本过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:first</td>
<td style="text-align:left">第一个</td>
</tr>
<tr>
<td style="text-align:left">:last</td>
<td style="text-align:left">最后一个</td>
</tr>
<tr>
<td style="text-align:left">:eq(index)</td>
<td style="text-align:left">获得指定索引</td>
</tr>
<tr>
<td style="text-align:left">:gt(index)</td>
<td style="text-align:left">大于</td>
</tr>
<tr>
<td style="text-align:left">:lt(index)</td>
<td style="text-align:left">小于</td>
</tr>
<tr>
<td style="text-align:left">:even</td>
<td style="text-align:left">偶数，从0开始计数</td>
</tr>
<tr>
<td style="text-align:left">:odd</td>
<td style="text-align:left">奇数</td>
</tr>
<tr>
<td style="text-align:left">:not(selector)</td>
<td style="text-align:left">去除所有与给定选择器匹配的元素</td>
</tr>
<tr>
<td style="text-align:left">:header</td>
<td style="text-align:left">获得所有标题元素，如&lt;h1&gt;..&lt;h6&gt;</td>
</tr>
<tr>
<td style="text-align:left">:animated</td>
<td style="text-align:left">获得所有正在执行的动画元素</td>
</tr>
<tr>
<td style="text-align:left">:focus</td>
<td style="text-align:left">当前获得焦点的元素</td>
</tr>
<tr>
<td style="text-align:left">下面的没有给予代码演示</td>
<td style="text-align:left">请自行翻阅文档</td>
</tr>
<tr>
<td style="text-align:left">:lang</td>
<td style="text-align:left">选择指定语言的所有元素</td>
</tr>
<tr>
<td style="text-align:left">:root</td>
<td style="text-align:left">选择该文档的根元素，即&lt;html&gt;</td>
</tr>
<tr>
<td style="text-align:left">:target</td>
<td style="text-align:left">选择由文档URI的格式化识别码表示的目标元素</td>
</tr>
</tbody>
</table>
<p>特别说明：</p>
<ul>
<li>:target1.9+：例如，给定的URI：<a href="http://example.com/#foo，" target="_blank" rel="external">http://example.com/#foo，</a> $(&quot;p:target&quot;)，将选择&lt;p id=&quot;foo&quot;&gt;元素。]</li>
<li>:lang1.9+：例如，$(&quot;div:lang(en)&quot;)将匹配&lt;div lang=&quot;en&quot;&gt; and &lt;div lang=&quot;en-us&quot;&gt;（和他们的后代&lt;div&gt;）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">// &lt;input type="button" value="选择第一个div元素." id="btn1"/&gt;</span></div><div class="line">    $(<span class="string">"btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:first"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择最后一个div元素." id="btn2"/&gt;</span></div><div class="line">    $(<span class="string">"btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:last"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择class不为one的 所有div元素." id="btn3"/&gt;</span></div><div class="line">    $(<span class="string">"btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:not('one')"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择索引值为偶数 的div元素." id="btn4"/&gt;</span></div><div class="line">    $(<span class="string">"btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:even"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择索引值为奇数 的div元素." id="btn5"/&gt;</span></div><div class="line">    $(<span class="string">"btn5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:odd"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择索引值等于3的元素." id="btn6"/&gt;</span></div><div class="line">    $(<span class="string">"btn6"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:eq(3)"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择索引值大于3的元素." id="btn7"/&gt;</span></div><div class="line">    $(<span class="string">"btn7"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:gt(3)"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择索引值小于3的元素." id="btn8"/&gt;</span></div><div class="line">    $(<span class="string">"btn8"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">"div:lt(3)"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择所有的标题元素." id="btn9"/&gt;</span></div><div class="line">    $(<span class="string">"btn9"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">":header"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/&gt;</span></div><div class="line">    $(<span class="string">"btn10"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        &amp;(<span class="string">":animated"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">// &lt;input type="text" value="请输入账号" defaultValue="请输入账号" /&gt;</span></div><div class="line"><span class="comment">// &lt;input type="text" value="请输入密码" defaultValue="请输入密码"/&gt;</span></div><div class="line">    <span class="comment">// 获得焦点 失去焦点 维护input的value值</span></div><div class="line">    <span class="comment">// $("input[type=’text‘]").blur( fn ).focus( fn );</span></div><div class="line">    $(<span class="string">"input[type='text']"</span>).on(<span class="string">"blur focus"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// 1 获得默认值 注意this是dom对象</span></div><div class="line">        <span class="keyword">var</span> dv = $(<span class="keyword">this</span>).attr(<span class="string">"defaultValue"</span>);</div><div class="line">        <span class="comment">// 2 判断是否获得焦点</span></div><div class="line">        <span class="keyword">if</span>( $(<span class="keyword">this</span>).is(<span class="string">":focus"</span>))&#123;</div><div class="line">            <span class="comment">// 2.1 如果是默认值，就清空</span></div><div class="line">            <span class="keyword">if</span>( $(<span class="keyword">this</span>).val() == dv )&#123;</div><div class="line">                $(<span class="keyword">this</span>).val(<span class="string">""</span>);</div><div class="line">                $(<span class="keyword">this</span>).css(<span class="string">"color"</span>, <span class="string">"#000"</span>);</div><div class="line">            &#125;</div><div class="line">        &#125;<span class="keyword">else</span>&#123; <span class="comment">// 3失去焦点</span></div><div class="line">            <span class="comment">// 3.1 如果内容为空，设置默认值</span></div><div class="line">            <span class="keyword">if</span>( $(<span class="keyword">this</span>).val == <span class="string">""</span> )&#123;</div><div class="line">                $(<span class="keyword">this</span>).val(dv);</div><div class="line">				$(<span class="keyword">this</span>).css(<span class="string">"color"</span>, <span class="string">"#999"</span>);</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="内容过滤"><a href="#内容过滤" class="headerlink" title="内容过滤"></a>内容过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:contains</td>
<td style="text-align:left">标签体是否包含指定的文本</td>
</tr>
<tr>
<td style="text-align:left">:empty</td>
<td style="text-align:left">当前元素是否为空(是否有标签体–子元素、文本)</td>
</tr>
<tr>
<td style="text-align:left">:has(selector)</td>
<td style="text-align:left">当前元素，是否含有指定的子元素</td>
</tr>
<tr>
<td style="text-align:left">:parent</td>
<td style="text-align:left">当前元素是否时父元素</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取含有文本“di”的div元素." id="btn1"/&gt;</span></div><div class="line">    $(<span class="string">"#btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:contains('di')"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/&gt;</span></div><div class="line">    $(<span class="string">"#btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:empty"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/&gt;</span></div><div class="line">    $(<span class="string">"#btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:has('.mini')"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/&gt;</span></div><div class="line">    $(<span class="string">"#btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:parent"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="可见性过滤"><a href="#可见性过滤" class="headerlink" title="可见性过滤"></a>可见性过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:hidden</td>
<td style="text-align:left">隐藏，特指style=”display:none”或type=”hidden”</td>
</tr>
<tr>
<td style="text-align:left">:visible</td>
<td style="text-align:left">可见(默认)</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">// &lt;input type="button" value=" 选取所有可见的div元素"  id="b1"/&gt;</span></div><div class="line">    $(<span class="string">"#b1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:visible"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;); </div><div class="line"><span class="comment">// &lt;input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show(毫秒) 方法将它们显示出来"  id="b2"/&gt;</span></div><div class="line">    $(<span class="string">"#b2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div:hidden"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>).show(<span class="number">1000</span>);</div><div class="line">    &#125;); </div><div class="line"><span class="comment">// &lt;input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/&gt;</span></div><div class="line">    $(<span class="string">"#b3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// 获得值时，默认获得第一个值</span></div><div class="line">        alert( $(<span class="string">"input:hidden"</span>).val() ); </div><div class="line">        <span class="comment">// 使用each函数遍历 即 foreach</span></div><div class="line">        $(<span class="string">"input:hidden"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">            alert( $(<span class="keyword">this</span>).val() );</div><div class="line">        &#125;);</div><div class="line">    &#125;); </div><div class="line"><span class="comment">// &lt;input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/&gt;</span></div><div class="line">    $(<span class="string">"#b4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// 使用each全局函数 回调函数</span></div><div class="line">        <span class="comment">// 参数1: index 当前索引</span></div><div class="line">        <span class="comment">// 参数2: domEle 当前遍历的对象，即this</span></div><div class="line">        $.each($(<span class="string">"input:hidden"</span>), <span class="function"><span class="keyword">function</span>(<span class="params">index, domEle</span>)</span>&#123;</div><div class="line">            alert( index + <span class="string">"@"</span> + $(domEle).val() );</div><div class="line">        &#125;);</div><div class="line"></div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="属性过滤"><a href="#属性过滤" class="headerlink" title="属性过滤"></a>属性过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">[attribute]</td>
<td style="text-align:left">获得指定属性名的元素</td>
</tr>
<tr>
<td style="text-align:left">[attribute==value]</td>
<td style="text-align:left">获得属性名 等于 指定值的元素</td>
</tr>
<tr>
<td style="text-align:left">[attribute!=value]</td>
<td style="text-align:left">获得属性名 不等于 指定值的元素</td>
</tr>
<tr>
<td style="text-align:left">[attribute^=value]</td>
<td style="text-align:left">获得以属性值 开头 的元素</td>
</tr>
<tr>
<td style="text-align:left">[attribute$=value]</td>
<td style="text-align:left">获得以属性值 结尾 的元素</td>
</tr>
<tr>
<td style="text-align:left">[attribute*=value]</td>
<td style="text-align:left">获得 含有属性值 的元素</td>
</tr>
<tr>
<td style="text-align:left">[attrSel1][attrSelN]</td>
<td style="text-align:left">复合选择器，多条件同时成立</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取含有 属性title 的div元素." id="btn1"/&gt;</span></div><div class="line">    $(<span class="string">"#btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title]"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/&gt;</span></div><div class="line">    $(<span class="string">"#btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title='test']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/&gt;</span></div><div class="line">    $(<span class="string">"#btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title!='test']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/&gt;</span></div><div class="line">    $(<span class="string">"#btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title^='te']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/&gt;</span></div><div class="line">    $(<span class="string">"#btn5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title$='est']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/&gt;</span></div><div class="line">    $(<span class="string">"#btn6"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[title*='es']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/&gt;</span></div><div class="line">    $(<span class="string">"#btn7"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"div[id][title*='es']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="子元素过滤"><a href="#子元素过滤" class="headerlink" title="子元素过滤"></a>子元素过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:first-child</td>
<td style="text-align:left">获得第一个孩子</td>
</tr>
<tr>
<td style="text-align:left">:last-child</td>
<td style="text-align:left">获得最后一个孩子</td>
</tr>
<tr>
<td style="text-align:left">:nth-child(index)</td>
<td style="text-align:left">获得第几个孩子，从1开始</td>
</tr>
<tr>
<td style="text-align:left">:only-child</td>
<td style="text-align:left">获得独生子</td>
</tr>
<tr>
<td style="text-align:left">没有介绍到的新特性</td>
<td style="text-align:left">请自行翻阅文档</td>
</tr>
<tr>
<td style="text-align:left">:first-of-type1.9+</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">:last-of-type1.9+</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">:nth-last-child()1.9+</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">:nth-last-of-type()1.9+</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">:nth-of-type()1.9+</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">:only-of-type1.9+</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/&gt;</span></div><div class="line">    $(<span class="string">"btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// 子元素选择器使用前提：表达式前面必须时元素，例如：$("div:nth-child(2)")</span></div><div class="line">        <span class="comment">// 如果元素上添加条件，必须使用空格$("div[class='one'] :nth-child(2)")</span></div><div class="line">        <span class="comment">//$("div[.class='one']: nth-child(2)").css("background-color", "#FF0");</span></div><div class="line">        $(<span class="string">"div.one: nth-child(2)"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">        <span class="comment">// 对比：</span></div><div class="line">        <span class="comment">//  $("div.one") 所有的div，自己的样式为one</span></div><div class="line">        <span class="comment">//  $("div .one") 所有的div后代元素，样式为noe</span></div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/&gt;</span></div><div class="line">    $(<span class="string">"btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">         $(<span class="string">"div.one :first-child"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/&gt;</span></div><div class="line">    $(<span class="string">"btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">         $(<span class="string">"div.one :last-child"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/&gt;</span></div><div class="line">     $(<span class="string">"btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">         $(<span class="string">"div.one :only-child"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">     &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="表单过滤"><a href="#表单过滤" class="headerlink" title="表单过滤"></a>表单过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:input</td>
<td style="text-align:left">所有的表单元素&lt;input&gt; / &lt;select&gt; / &lt;textarea&gt; / &lt;button&gt;</td>
</tr>
<tr>
<td style="text-align:left">:text</td>
<td style="text-align:left">文本框</td>
</tr>
<tr>
<td style="text-align:left">:password</td>
<td style="text-align:left">密码框</td>
</tr>
<tr>
<td style="text-align:left">:radio</td>
<td style="text-align:left">单选</td>
</tr>
<tr>
<td style="text-align:left">:checkbox</td>
<td style="text-align:left">复选框</td>
</tr>
<tr>
<td style="text-align:left">:submit</td>
<td style="text-align:left">提交按钮</td>
</tr>
<tr>
<td style="text-align:left">:image</td>
<td style="text-align:left">图片按钮</td>
</tr>
<tr>
<td style="text-align:left">:reset</td>
<td style="text-align:left">重置按钮</td>
</tr>
<tr>
<td style="text-align:left">:file</td>
<td style="text-align:left">文件上传</td>
</tr>
<tr>
<td style="text-align:left">:hidden</td>
<td style="text-align:left">隐藏域，type=”hidden”和style=”display:none”</td>
</tr>
<tr>
<td style="text-align:left">:button</td>
<td style="text-align:left">所有普通按钮。&lt;button &gt;或&lt;input type=&quot;button&quot;&gt;</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="comment">// 获得所有文本框 密码框 单选框 复选框</span></div><div class="line">    <span class="keyword">var</span> $alltext = $(<span class="string">"#form1 :text"</span>);</div><div class="line">    <span class="keyword">var</span> $allpassword= $(<span class="string">"#form1 :password"</span>);</div><div class="line">    <span class="keyword">var</span> $allradio= $(<span class="string">"#form1 :radio"</span>);</div><div class="line">    <span class="keyword">var</span> $allcheckbox= $(<span class="string">"#form1 :checkbox"</span>);</div><div class="line"></div><div class="line">    <span class="comment">// 获得所有提交按钮 图片按钮 重置按钮 普通按钮 文件上传组件 隐藏域</span></div><div class="line">    <span class="keyword">var</span> $allsubmit= $(<span class="string">"#form1 :submit"</span>);</div><div class="line">	<span class="keyword">var</span> $allimage= $(<span class="string">"#form1 :image"</span>);</div><div class="line">	<span class="keyword">var</span> $allreset= $(<span class="string">"#form1 :reset"</span>);</div><div class="line">	<span class="keyword">var</span> $allbutton= $(<span class="string">"#form1 :button"</span>);</div><div class="line">	<span class="keyword">var</span> $allfile= $(<span class="string">"#form1 :file"</span>);</div><div class="line">    <span class="keyword">var</span> $allhidden= $(<span class="string">"#form1 :hidden"</span>);</div><div class="line">    <span class="keyword">var</span> $allselect = $(<span class="string">"#form1 select"</span>);</div><div class="line">    <span class="keyword">var</span> $alltextarea = $(<span class="string">"#form1 textarea"</span>);</div><div class="line">    <span class="comment">// 获得所有表单元素 和 所有input元素</span></div><div class="line">    <span class="keyword">var</span> $AllInputs = $(<span class="string">"#form1 :input"</span>);</div><div class="line">	<span class="keyword">var</span> $inputs = $(<span class="string">"#form1 input"</span>);</div><div class="line"></div><div class="line">    $(<span class="string">"div"</span>).append(<span class="string">" 有"</span> + $alltext.length + <span class="string">" 个（ :text 元素）&lt;br/&gt;"</span>)</div><div class="line">	        .append(<span class="string">" 有"</span> + $allpassword.length + <span class="string">" 个（ :password 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allradio.length + <span class="string">" 个（ :radio 元素）&lt;br/&gt;"</span>)</div><div class="line">            .append(<span class="string">" 有"</span> + $allcheckbox.length + <span class="string">" 个（ :checkbox 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allsubmit.length + <span class="string">" 个（ :submit 元素）&lt;br/&gt;"</span>)</div><div class="line">            .append(<span class="string">" 有"</span> + $allimage.length + <span class="string">" 个（ :image 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allreset.length + <span class="string">" 个（ :reset 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allbutton.length + <span class="string">" 个（ :button 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allfile.length + <span class="string">" 个（ :file 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allhidden.length + <span class="string">" 个（ :hidden 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $allselect.length + <span class="string">" 个（ select 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 有"</span> + $alltextarea.length + <span class="string">" 个（ textarea 元素）&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 表单有 "</span> + $inputs.length + <span class="string">" 个（input）元素。&lt;br/&gt;"</span>)</div><div class="line">			.append(<span class="string">" 总共有 "</span> + $AllInputs.length + <span class="string">" 个(:input)元素。&lt;br/&gt;"</span>)</div><div class="line">			.css(<span class="string">"color"</span>, <span class="string">"red"</span>)</div><div class="line">    </div><div class="line">    <span class="comment">// 显示所有隐藏标签名称</span></div><div class="line">    $allhidden.each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// $("div").append("&lt;br/&gt;").append( $(this).get(0).nodeName );</span></div><div class="line">        <span class="comment">// this是dom对象</span></div><div class="line">        $(<span class="string">"div"</span>).append(<span class="string">"&lt;br/&gt;"</span>).append(<span class="keyword">this</span>.nodeName);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    $(<span class="string">"form"</span>).submit( <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">// 不能提交。</span></div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="表单对象属性过滤"><a href="#表单对象属性过滤" class="headerlink" title="表单对象属性过滤"></a>表单对象属性过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">:enabled</td>
<td style="text-align:left">可用</td>
</tr>
<tr>
<td style="text-align:left">:disabled</td>
<td style="text-align:left">不可用。disabled=”disabled” 或 disabled=”” 或 disabled</td>
</tr>
<tr>
<td style="text-align:left">:checked</td>
<td style="text-align:left">选中。单选radio，复选框checkbox</td>
</tr>
<tr>
<td style="text-align:left">:selected</td>
<td style="text-align:left">选择。下拉列表 select option</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;button id="btn1"&gt;对表单内 可用input 赋值操作.&lt;/button&gt;</span></div><div class="line">    $(<span class="string">"#btn1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"input:enabled"</span>).val(<span class="string">"aaaaaaaaaa"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;button id="btn2"&gt;对表单内 不可用input 赋值操作.&lt;/button&gt;</span></div><div class="line">    $(<span class="string">"#btn2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"input:disabled"</span>).val(<span class="string">"aaaaaaaaaa"</span>);</div><div class="line">    &#125;);</div><div class="line"><span class="comment">//  &lt;button id="btn3"&gt;获取多选框选中的个数.&lt;/button&gt;</span></div><div class="line">    $(<span class="string">"#btn3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        alert($(<span class="string">"[name='newsletter']:checked"</span>).size());</div><div class="line">    &#125;); </div><div class="line"><span class="comment">//  &lt;button id="btn4"&gt;获取下拉框选中的内容.&lt;/button&gt;</span></div><div class="line">    $(<span class="string">"#btn4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">// 让div id = selectDivId 获得选中标签&lt;option&gt;</span></div><div class="line">        $(<span class="string">":selected"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">            <span class="comment">// val() 获得option时，如果没有value值，将获得text的值</span></div><div class="line">            $(<span class="string">"#selectDivId"</span>).append( $(<span class="keyword">this</span>).val() + <span class="string">"&lt;br&gt;"</span> );</div><div class="line">        &#125;);</div><div class="line">    &#125;);  </div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="属性和CSS"><a href="#属性和CSS" class="headerlink" title="属性和CSS"></a>属性和CSS</h2><h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">attr(name)</td>
<td style="text-align:left">获得指定属性名的值</td>
</tr>
<tr>
<td style="text-align:left">attr(key,val)</td>
<td style="text-align:left">给一个指定属性名设置值</td>
</tr>
<tr>
<td style="text-align:left">attr(prop)</td>
<td style="text-align:left">给多个属性设置值，参数：prop json数据</td>
</tr>
<tr>
<td style="text-align:left">removeAttr(name)</td>
<td style="text-align:left">移除指定属性</td>
</tr>
<tr>
<td style="text-align:left">下面的没有给予代码演示</td>
<td style="text-align:left">请自行翻阅文档</td>
</tr>
<tr>
<td style="text-align:left">prop(name properties</td>
<td style="text-align:left">key,value</td>
<td>fn)</td>
<td>获得匹配元素的第一个元素的属性</td>
</tr>
<tr>
<td style="text-align:left">removeProp(name)</td>
<td style="text-align:left">移除由prop()方法设置的属性集</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 1 设置姓名文本框不可用</span></div><div class="line"><span class="comment">//$("[name='username']").attr("disabled", "disabled");</span></div><div class="line">$(<span class="string">"[name='username']"</span>).attr(<span class="string">"disabled"</span>, <span class="string">""</span>);</div><div class="line"></div><div class="line"><span class="comment">// 2 设为可用必须移除</span></div><div class="line">$(<span class="string">"[name='username']"</span>).removeAttr(<span class="string">"disabled"</span>);</div></pre></td></tr></table></figure>
<h3 id="CSS类"><a href="#CSS类" class="headerlink" title="CSS类"></a>CSS类</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">addClass(class fn)</td>
<td style="text-align:left">追加一个类</td>
</tr>
<tr>
<td style="text-align:left">removeClass([class fn])</td>
<td style="text-align:left">移除一个类</td>
</tr>
<tr>
<td style="text-align:left">toggleClass(class fn[,sw])</td>
<td style="text-align:left">如果有class将它移除，如果没有将添加</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 3 如果有class将它移除，如果没有将添加</span></div><div class="line">$(<span class="string">"#buttonId"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    $(<span class="string">"[name='username']"</span>).toggleClass(<span class="string">"textClass"</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="HTML-代码-文本-值"><a href="#HTML-代码-文本-值" class="headerlink" title="HTML 代码/文本/值"></a>HTML 代码/文本/值</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">html()</td>
<td style="text-align:left">获得html代码，含有标签</td>
</tr>
<tr>
<td style="text-align:left">html(…)</td>
<td style="text-align:left">设置html代码，如果有标签，将其解析</td>
</tr>
<tr>
<td style="text-align:left">text()</td>
<td style="text-align:left">获得文本值，将标签进行过滤</td>
</tr>
<tr>
<td style="text-align:left">text(…)</td>
<td style="text-align:left">设置文本值，如果有标签，将被转义</td>
</tr>
<tr>
<td style="text-align:left">val()</td>
<td style="text-align:left">获得value的值</td>
</tr>
<tr>
<td style="text-align:left">val(…)</td>
<td style="text-align:left">设置value的值</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 4 text/html</span></div><div class="line"><span class="comment">// alert( $("div").text() );</span></div><div class="line"><span class="comment">// alert( $("div").html() );</span></div><div class="line"><span class="comment">// 测试转义</span></div><div class="line">$(<span class="string">"div"</span>).text(<span class="string">"&lt;a href='http://www.itheima.com'&gt;你点我呀&lt;/a&gt;"</span>);</div><div class="line"><span class="comment">//$("div").html("&lt;a href='http://www.itheima.com'&gt;你点我呀&lt;/a&gt;");</span></div></pre></td></tr></table></figure>
<h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">css(name)</td>
<td style="text-align:left">获得指定名称的css值</td>
</tr>
<tr>
<td style="text-align:left">css(name, value)</td>
<td style="text-align:left">设置一对值</td>
</tr>
<tr>
<td style="text-align:left">css(prop)</td>
<td style="text-align:left">设置一组值 json</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 5 css</span></div><div class="line">$(<span class="string">"div"</span>).css(<span class="string">"border"</span>,<span class="string">"1px solid #999"</span>);</div><div class="line">$(<span class="string">"div"</span>).css(&#123;</div><div class="line">    <span class="string">"width"</span>:<span class="string">"200px"</span>,</div><div class="line">    <span class="string">"height"</span>:<span class="string">"200px"</span>,</div><div class="line">    <span class="string">"font-size"</span>:<span class="string">"60px"</span>,</div><div class="line">    <span class="string">"color"</span>:<span class="string">"#f00"</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">offset()</td>
<td style="text-align:left">获得坐标 ， 返回JSON对象，{“top”:200, “left” : 100}</td>
</tr>
<tr>
<td style="text-align:left">offset(…)</td>
<td style="text-align:left">设置坐标值，例如：$(this).offset({“top”:0 , “left” : 0})</td>
</tr>
<tr>
<td style="text-align:left">scrollTop()or(…)</td>
<td style="text-align:left">垂直滚动条 滚过的距离</td>
</tr>
<tr>
<td style="text-align:left">scrollLeft()or(…)</td>
<td style="text-align:left">水平滚动条 滚过的距离</td>
</tr>
</tbody>
</table>
<h3 id="尺寸"><a href="#尺寸" class="headerlink" title="尺寸"></a>尺寸</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">height([val fn])</td>
<td style="text-align:left">获得 或 设置 高度</td>
</tr>
<tr>
<td style="text-align:left">width([val fn])</td>
<td style="text-align:left">获得 或 设置 宽度</td>
</tr>
<tr>
<td style="text-align:left">innerHeight()</td>
<td style="text-align:left">获得第一个元素的内高度</td>
</tr>
<tr>
<td style="text-align:left">innerWidth()</td>
<td style="text-align:left">获得第一个元素的外宽度</td>
</tr>
<tr>
<td style="text-align:left">outerHeight([soptions])</td>
<td style="text-align:left">获得外部高度 参数true计算边距</td>
</tr>
<tr>
<td style="text-align:left">outerWidth([options])</td>
<td style="text-align:left">获得外部宽度 参数true计算边距</td>
</tr>
</tbody>
</table>
<h2 id="文档处理"><a href="#文档处理" class="headerlink" title="文档处理"></a>文档处理</h2><h3 id="内部插入"><a href="#内部插入" class="headerlink" title="内部插入"></a>内部插入</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">A.append(B)</td>
<td style="text-align:left">将B插入到A的内部后面(串联操作A)</td>
</tr>
<tr>
<td style="text-align:left">A.appendTo(B)</td>
<td style="text-align:left">将A插入到B的内部后面(串联操作A)</td>
</tr>
<tr>
<td style="text-align:left">A.prepend(B)</td>
<td style="text-align:left">将B插入到A的内部前面(串联操作A)</td>
</tr>
<tr>
<td style="text-align:left">A.prependTo(B)</td>
<td style="text-align:left">将A插入到B的内部前面(串联操作A)</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//将天津插入到love 的内部 前 或 后</span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> $tj = $(<span class="string">"#tj"</span>);</div><div class="line">    <span class="keyword">var</span> $love = $(<span class="string">"#love"</span>);</div><div class="line">    <span class="comment">//$love.append($tj);</span></div><div class="line">    <span class="comment">//$tj.appendTo($love);</span></div><div class="line">    <span class="comment">//$love.prepend($tj);</span></div><div class="line">    $tj.prependTo($love);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="外部插入"><a href="#外部插入" class="headerlink" title="外部插入"></a>外部插入</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">A.after(B)</td>
<td style="text-align:left">将B插入到A后面(同级)</td>
</tr>
<tr>
<td style="text-align:left">A.before(B)</td>
<td style="text-align:left">将B插入到A前面(同级)</td>
</tr>
<tr>
<td style="text-align:left">A.insertAfter(B)</td>
<td style="text-align:left">将A插入到B后面</td>
</tr>
<tr>
<td style="text-align:left">A.insertBefore(B)</td>
<td style="text-align:left">将A插入到B前面</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 将city 插入到 p2 前或后</span></div><div class="line"><span class="keyword">var</span> $city = $(<span class="string">"#city"</span>);</div><div class="line"><span class="keyword">var</span> $p2 = $(<span class="string">"#p2"</span>);</div><div class="line"></div><div class="line"><span class="comment">// 后</span></div><div class="line"><span class="comment">//$p2.after($city);</span></div><div class="line"><span class="comment">//$city.insertAfter($p2); </span></div><div class="line"></div><div class="line"><span class="comment">// 前</span></div><div class="line"><span class="comment">//$p2.before($city);</span></div><div class="line">$city.insertBefore($p2);</div></pre></td></tr></table></figure>
<h3 id="包裹"><a href="#包裹" class="headerlink" title="包裹"></a>包裹</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">A.wrap(B)</td>
<td style="text-align:left">使用B将每一个A都进行包裹(有多个B)</td>
</tr>
<tr>
<td style="text-align:left">A.wrapAll(B)</td>
<td style="text-align:left">使用B将所有A进行包裹(一个B)</td>
</tr>
<tr>
<td style="text-align:left">A.wrapInner(B)</td>
<td style="text-align:left">使用B将每一个A内的标签体包裹</td>
</tr>
<tr>
<td style="text-align:left">A.unwrap()</td>
<td style="text-align:left">将A的父元素删除，自己留着</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 每一个包裹</span></div><div class="line"><span class="comment">//$("strong").wrap("&lt;div&gt;&lt;/div&gt;");</span></div><div class="line"><span class="comment">// 一个包裹</span></div><div class="line"><span class="comment">//$("strong").wrapAll("&lt;div&gt;&lt;/div&gt;");</span></div><div class="line"><span class="comment">// 每一个标签体包裹</span></div><div class="line">$(<span class="string">"strong"</span>).wrapInner(<span class="string">"&lt;div&gt;&lt;/div&gt;"</span>);</div></pre></td></tr></table></figure>
<h3 id="替换"><a href="#替换" class="headerlink" title="替换"></a>替换</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">A.replaceWith(B)</td>
<td style="text-align:left">使用A将B替换掉</td>
</tr>
<tr>
<td style="text-align:left">A.replaceAll(B)</td>
<td style="text-align:left">使用B将A替换掉</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//$("p").replaceWith("&lt;a&gt;xx&lt;/a&gt; &lt;br/&gt;");</span></div><div class="line">$(<span class="string">"&lt;a&gt;xx&lt;/a&gt; &lt;br/&gt;"</span>).replaceAll(<span class="string">"p"</span>);</div></pre></td></tr></table></figure>
<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">empty()</td>
<td style="text-align:left">清空标签体</td>
</tr>
<tr>
<td style="text-align:left">remove()</td>
<td style="text-align:left">删除当前对象。元素保留，绑定事件和绑定数据都会被移除</td>
</tr>
<tr>
<td style="text-align:left">detach([expr])</td>
<td style="text-align:left">删除当前对象。元素保留，绑定事件和绑定数据都会保留</td>
</tr>
<tr>
<td style="text-align:left">绑定数据</td>
<td style="text-align:left">案例需要用到数据缓存的方法</td>
</tr>
<tr>
<td style="text-align:left">data(name)</td>
<td style="text-align:left">获得绑定数据</td>
</tr>
<tr>
<td style="text-align:left">data(name, value)</td>
<td style="text-align:left">设置绑定数据</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//#1 绑定事件</span></div><div class="line">$(<span class="string">"#city"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    alert(<span class="string">";-)"</span>);</div><div class="line">&#125;)</div><div class="line"><span class="comment">//#2 绑定数据</span></div><div class="line">$(<span class="string">"#city"</span>).data(<span class="string">"key"</span>, <span class="string">"value"</span>);</div><div class="line"></div><div class="line"><span class="comment">// 将city移除，再追加到body后面</span></div><div class="line"><span class="comment">// 1 移除</span></div><div class="line"><span class="comment">//var $city = $("#city").remove(); // 移除绑定的事件，数据</span></div><div class="line"><span class="keyword">var</span> $city = $(<span class="string">"#city"</span>).detach(); <span class="comment">// 保留绑定的事件，数据</span></div><div class="line"><span class="comment">// 2 追加</span></div><div class="line">$(<span class="string">"body"</span>).append($city);</div><div class="line"><span class="comment">// 3 获得绑定数据</span></div><div class="line">alert($city.data(<span class="string">"key"</span>));</div></pre></td></tr></table></figure>
<h3 id="复制"><a href="#复制" class="headerlink" title="复制"></a>复制</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">clone(even)</td>
<td style="text-align:left">克隆，even：指示事件处理函数是否会被复制，默认false</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">".save"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> $<span class="keyword">new</span> = $(<span class="keyword">this</span>).clone(<span class="literal">true</span>);</div><div class="line">    $(<span class="string">"body"</span>).append($<span class="keyword">new</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="选择器案例"><a href="#选择器案例" class="headerlink" title="选择器案例"></a>选择器案例</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 制作动态列表效果 显示隐藏</span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="comment">// 从第五个开始，不要最后一个，控制显示或隐藏</span></div><div class="line">    <span class="comment">// 1 隐藏</span></div><div class="line">    <span class="keyword">var</span> $allLi = $(<span class="string">"li:gt(4):not(:last)"</span>);</div><div class="line">    $allLi.hide();</div><div class="line">    <span class="comment">// 2 点击切换显示或隐藏</span></div><div class="line">    $(<span class="string">"span"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        <span class="comment">//$allLi.show();</span></div><div class="line">        <span class="comment">//$allLi.toggle();</span></div><div class="line">        <span class="comment">// 判断是否隐藏</span></div><div class="line">        <span class="keyword">if</span>( $allLi.is(<span class="string">":hidden"</span>))&#123;</div><div class="line">            $allLi.show(<span class="number">1000</span>);</div><div class="line">            $(<span class="string">"li:last"</span>).hide();</div><div class="line">            $(<span class="keyword">this</span>).html(<span class="string">"隐藏全部品牌"</span>);</div><div class="line">        &#125;<span class="keyword">else</span>&#123;</div><div class="line">            $allLi.hide(<span class="number">1000</span>);</div><div class="line">            $(<span class="string">"li:last"</span>).toggle();</div><div class="line">            $(<span class="keyword">this</span>).html(<span class="string">"显示全部品牌"</span>);</div><div class="line">        &#125;</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="文档处理案例"><a href="#文档处理案例" class="headerlink" title="文档处理案例"></a>文档处理案例</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 左右select选择</span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    $(<span class="string">"#left1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#leftSelectId :selected:first"</span>).removeAttr(<span class="string">"selected"</span>).appendTo(<span class="string">"#rightSelectId"</span>);</div><div class="line">    &#125;);</div><div class="line">    $(<span class="string">"#left2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#leftSelectId :selected"</span>).removeAttr(<span class="string">"selected"</span>).appendTo(<span class="string">"#rightSelectId"</span>);</div><div class="line">    &#125;);</div><div class="line">    $(<span class="string">"#left3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#leftSelectId option"</span>).removeAttr(<span class="string">"selected"</span>).appendTo(<span class="string">"#rightSelectId"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2017-11-13T14:17:20.462Z" itemprop="dateUpdated">2017年11月13日 22:17</time>
</span><br>


        如要转载请注明出处：<a href="/2017/07/30/jQuery_primary_01/" target="_blank" rel="external">http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/</a>
    </div>
    <footer>
        <a href="http://magic_duck.oschina.io">
            <img src="/img/avatar.jpg" alt="神奇的鸭鸭">
            神奇的鸭鸭
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&title=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&pic=http://magic_duck.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&title=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&via=http://magic_duck.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2017/08/01/jQuery_primary_02/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">jQuery入门(二)</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2017/06/09/cloud.tencent_Centos6.5_Install_JavaEnvironment/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">腾讯云Centos6.5搭建JavaWeb环境:Mysql5.6+jdk1.7+tomcat7</h4>
      </a>
    </div>
  
</nav>



    







</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        我只要一角钱~ ~
        <i class="icon icon-quote-right"></i>
    </h3>
    <ul class="reward-items">
        
        <li>
            <img src="/img/wechat.png" title="微信打赏二维码" alt="微信打赏二维码">
            <p>微信</p>
        </li>
        

        
        <li>
            <img src="/img/alipay.jpg" title="支付宝打赏二维码" alt="支付宝打赏二维码">
            <p>支付宝</p>
        </li>
        
    </ul>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            <span><a href="" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            <span>博客内容遵循 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://git.oschina.net/z77z" target="_blank">邹海清</a></span>
            <span>神奇的鸭鸭の码农库 &copy; 2017</span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&title=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&pic=http://magic_duck.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&title=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jQuery入门(一)》 — 神奇的鸭鸭の码农库&url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/&via=http://magic_duck.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=http://magic_duck.oschina.io/2017/07/30/jQuery_primary_01/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };



lazyScripts.push('//s95.cnzz.com/z_stat.php?id=1261081671&web_id=1261081671')

</script>

<script src="/js/main.min.js?v=1.4.3"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="/js/search.min.js?v=1.4.3" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>


</body>
</html>
